<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>小红书</title>
    <link rel="stylesheet" href="/css/find.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <script src="/js/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- 左侧导航栏 -->
      <div class="sidebar" style="margin-top: -60px">
        <img
          style="height: 40px; margin-bottom: 20px"
          src=""
          alt=""
        />
        <div class="nav-item active" style="margin-top: 0">首页</div>
        <div class="nav-item">通知</div>
        <a class="nav-item" href="">我</a>
      </div>
      <div class="content">
        <!-- 中间内容区 -->
        <!-- <div class="video-container">
          <video
            class="myVideo"
            src="https://v26-dy.ixigua.com/1b05db763c23004e6495ccfce23ca4fe/680a15c9/video/tos/cn/tos-cn-ve-15/o8oUAiQGeIeDt9TLIqOe6AQeHEJLelSAssIDVp/?a=2011&ch=0&cr=0&dr=0&net=5&cd=0%7C0%7C0%7C0&cv=1&br=1025&bt=1025&cs=0&ds=3&ft=k7Fz7VVywIiRZm8Zmo~pK7pswAp5O6tUvrKtqj02do0g3cI&mime_type=video_mp4&qs=0&rc=Nmc6aTZoPGc4ZDloNDY2OkBpM3Bsb2o5cjh5eDMzNGkzM0AtMjM2MTIwNi8xYWIyNmJgYSNuZ2RzMmQ0MmZgLS1kLS9zcw%3D%3D&btag=80000e00038000&dy_q=1745487121&feature_id=aa7df520beeae8e397df15f38df0454c&l=20250424173201DF91DE044B9834447801"
            enable-danmu
            
            danmu-btn 
            controls
          ></video>
        </div> -->
        <div class="imagecontainer">
          <img
            src="https://sns-webpic-qc.xhscdn.com/202504251020/5ad866af0daf75959080a49fe08dbb83/1040g2sg31fop9remgc704bh8aqdbnj98idbur68!nd_dft_wlteh_webp_3"
            alt="山峰风景"
          />
          <!-- <img
            src="https://sns-webpic-qc.xhscdn.com/202504251013/03080c70a1732405efc313fea373fced/notes_pre_post/1040g3k031fkaftft04105o20b5a08ecf3egji78!nd_dft_wgth_webp_3"
            alt="山峰风景"
          /> -->
        </div>

        <!-- 右侧信息栏 -->
        <div class="info-sidebar">
          <div class="user-info">
            <img
              class="avatar"
              src="https://iknow-pic.cdn.bcebos.com/a71ea8d3fd1f4134679182fe371f95cad0c85e88"
              alt="用户头像"
            />
            <span>夏日</span>
            <button class="follow-btn">关注</button>
          </div>
          <div class="scroll-box">
            <div class="post-content">
              <h3>不懂就问，一小时能17公里什么水平？</h3>
              <p class="post—cons">米老鼠来啦！带你一起玩超级好玩！</p>
              <div class="xaio-position">
                <span>03-18</span> <text>上海</text>
              </div>
            </div>
            <div class="comments-section">
              <div class="comment-count">共 152 条评论</div>
              <div class="comment">
                <img
                  class="comment-avatar"
                  src="https://iknow-pic.cdn.bcebos.com/a71ea8d3fd1f4134679182fe371f95cad0c85e88"
                  alt="评论者头像"
                />
                <div class="comment-content">
                  <div class="comment-username">小红</div>
                  <p class="comment-text">
                    因为安全角度确实应该坐，但前提是你要能让一个两三岁的娃在座位上坐一两个小时不闹腾，这基本是无法完成的任务。他不但不会安稳坐着，还会到处折腾，经常从座椅中间爬过来抓你。
                  </p>
                  <p class="comment-meta">
                    <span class="comment-date">2021-12-12</span>
                    <text class="comment-location">四川</text>
                  </p>
                  <div class="comment-interaction">
                    <div class="comment-interaction-item">
                      <i class="far fa-heart"></i>
                      <span>1523</span>
                    </div>
                    <div
                      class="comment-interaction-item"
                      style="margin-left: 10px"
                    >
                      <i class="far fa-comment"></i>
                      <span>2636</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="comment">
                <img
                  class="comment-avatar"
                  src="https://iknow-pic.cdn.bcebos.com/a71ea8d3fd1f4134679182fe371f95cad0c85e88"
                  alt="评论者头像"
                />
                <div class="comment-content">
                  <div class="comment-username">小红</div>
                  <p class="comment-text">
                    因为安全角度确实应该坐，但前提是你要能让一个两三岁的娃在座位上坐一两个小时不闹腾，这基本是无法完成的任务。他不但不会安稳坐着，还会到处折腾，经常从座椅中间爬过来抓你。
                  </p>
                  <p class="comment-meta">
                    <span class="comment-date">2021-12-12</span>
                    <text class="comment-location">四川</text>
                  </p>
                  <div class="comment-interaction">
                    <div class="comment-interaction-item">
                      <i class="far fa-heart"></i>
                      <span>1523</span>
                    </div>
                    <div
                      class="comment-interaction-item"
                      style="margin-left: 10px"
                    >
                      <i class="far fa-comment"></i>
                      <span>2636</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="comment">
                <img
                  class="comment-avatar"
                  src="https://iknow-pic.cdn.bcebos.com/a71ea8d3fd1f4134679182fe371f95cad0c85e88"
                  alt="评论者头像"
                />
                <div class="comment-content">
                  <div class="comment-username">小红</div>
                  <p class="comment-text">
                    因为安全角度确实应该坐，但前提是你要能让一个两三岁的娃在座位上坐一两个小时不闹腾，这基本是无法完成的任务。他不但不会安稳坐着，还会到处折腾，经常从座椅中间爬过来抓你。
                  </p>
                  <p class="comment-meta">
                    <span class="comment-date">2021-12-12</span>
                    <text class="comment-location">四川</text>
                  </p>
                  <div class="comment-interaction">
                    <div class="comment-interaction-item">
                      <i class="far fa-heart"></i>
                      <span>1523</span>
                    </div>
                    <div
                      class="comment-interaction-item"
                      style="margin-left: 10px"
                    >
                      <i class="far fa-comment"></i>
                      <span>2636</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 更多评论 -->
            </div>
          </div>
          <div class="comment-box">
            <div class="search-box">
              <input type="text" class="search-input" placeholder="评论" />
            </div>
            <div class="interaction-bar">
              <div class="interaction-item">
                <i class="far fa-heart"></i>
                <span>1523</span>
              </div>
              <div class="interaction-item">
                <i class="far fa-star"></i>
                <span>2636</span>
              </div>
              <div class="interaction-item">
                <i class="far fa-comment"></i>
                <span>534</span>
              </div>
              <div class="interaction-item">
                <i class="fas fa-share-alt"></i>
              </div>
            </div>
          </div>
          <!-- 弹窗遮罩层 -->
          <div class="modal-overlay" style="display: none">
            <div class="comment-modal">
              <div class="modal-header">
                <h3>发表评论</h3>
                <button class="close-modal">&times;</button>
              </div>
              <div class="modal-content">
                <textarea
                  class="comment-textarea"
                  style="border: none"
                  placeholder="写下你的评论..."
                ></textarea>
              </div>
              <div class="modal-footer">
                <button class="cancel-btn">取消</button>
                <button class="send-btn">发送</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      $(document).ready(function () {
        // 原有的交互项点击事件
        $(".interaction-item").click(function () {
          $(this).toggleClass("active");
          const span = $(this).find("span");
          const currentCount = parseInt(span.text());
          if ($(this).hasClass("active")) {
            span.text(currentCount + 1);
          } else {
            span.text(currentCount - 1);
          }
        });

        // 搜索框点击事件
        $(".search-input").click(function () {
          $(".modal-overlay").fadeIn(200);
        });

        // 关闭弹窗事件
        $(".close-modal, .cancel-btn").click(function () {
          $(".modal-overlay").fadeOut(200);
        });

        // 发送按钮点击事件
        $(".send-btn").click(function () {
          const commentText = $(".comment-textarea").val().trim();
          if (commentText) {
            // 这里可以添加发送评论的逻辑
            alert("评论已发送！");
            $(".modal-overlay").fadeOut(200);
            $(".comment-textarea").val("");
          } else {
            alert("请输入评论内容！");
          }
        });
      });
    </script>
  </body>
</html>
